<template>
    <el-dialog :model-value="show" title="分配角色" @close="emit('hide')">
        <el-form ref="formRef" :model="form" :rules="rules">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="备注" prop="note">
                <el-input v-model="form.description" :rows="4" type="textarea" autocomplete="off" />
            </el-form-item>
            <el-form-item label="是否启用">
                <el-radio-group v-model="form.status" class="ml-4">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button>取消</el-button>
                <el-button type="primary" @click="submitFn">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang='ts'>
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import { reactive, ref, watch } from 'vue';
import { cerateRoleAPI, getRoleListAPI, editRolesAPI } from './api';

const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    id: {
        type: Number,
        default: 0,
    }
});

const emit = defineEmits(["hide"]);

const form = reactive<IRoleList>({
    description: "",
    name: "",
    status: 1
});
const rules = {
    name: [{ required: true, trigger: "blur", message: "请填写角色名称" }]
};
const formRef = ref<FormInstance>();

watch(() => props.id, () => {
    if (props.id !== 0) {
        console.log(props.id);
        getRoleListAPI().then(res => {
            console.log(res);
            if (res.code === 200) {
                res.data.forEach(item => {
                    if (item.id === props.id) {
                        Object.assign(form, item)

                    }
                })
            }
        })
    }
})

const addRole = () => {
    ElMessageBox.confirm("确定要添加此角色吗？", "添加角色", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    }).then(() => {
        cerateRoleAPI(form).then(res => {
            if (res.code === 200) {
                ElMessage.success("添加成功")
                formRef.value?.resetFields();
                emit('hide', true)
            }
        })
        console.log(form);

    }).catch(() => {

    })
}
const editRole = () => {
    ElMessageBox.confirm("确定要修改此用户吗？", "添加用户", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    }).then(() => {
        console.log(props.id);
        editRolesAPI(props.id, form).then(res => {
            if (res.code === 200) {
                ElMessage.success("修改成功")
                formRef.value?.resetFields();
                emit('hide', true)
            }
        })
    }).catch(() => {

    })
}
const submitFn = () => {
    formRef.value?.validate((ok: boolean) => {
        if (ok) {
            if (props.id === 0) {
                addRole()
            } else {
                editRole()
            }
        } else {
            // 提示
        }
    });
}
</script>
<style lang="less" scoped>

</style>